<template>
    <div class="approval">
      <home-nav :userData='userinfo'></home-nav>
      <div class="banner"></div>
        <div class="project-summary" ref="imageWrapper">
          <div style="color: #333;font-size: 18px;font-weight: bold;margin: 15px 0;">
            <span style="margin-right:30px">项目转储</span>
            <span style="margin-right:30px">项目编号：{{ projectAuditInfo.projectBuild.projectNo }}</span>
            <span>项目名称：{{ projectAuditInfo.projectBuild.projectName }}</span>
          </div>
          <div class="info-title">
            <img src="@/assets/category-blue.png" alt="" />
            <span>项目基本信息</span>
          </div>
              <!-- 项目基本信息 -->
          <project-build-basic-show :project-audit-info="projectAuditInfo"></project-build-basic-show>

              <div class="attachment-detail">
                <div class="info-title">
                  <img src="@/assets/category-blue.png" alt="">
                  <span>项目所处节点</span>
                  <span style="font-size: 15px;margin-top: 3px;margin-left: 20px;color: #fcb202">{{projectReserveInfo.currentTimeNode}}</span>
                </div>
              </div>
              <div class="attachment-detail">
                <div class="info-title">
                  <img src="@/assets/category-blue.png" alt="">
                  <span>转储原因</span>
                </div>
                <div class="content-box">
                  <a-textarea v-model="projectReserveInfo.reserveReason" style="border-color: red;" placeholder="请输入转储原因" auto-size />
                </div>
              </div>

              <div class="project-schedule">
                <div class="info-title">
                  <img src="@/assets/category-blue.png" alt="">
                  <span>上传项目材料</span>
                  <img src="@/assets/attention-red.png" alt="" />
                  <span>注：上传项目执行过程中产生的所有材料（已报工材料可不必重复上传）</span>
                </div>
                <div>
                  <div class="upload" style="margin:10px 0;">
                    <ht-upload
                      ref="myUpload"
                      class="upload-demo"
                      multiple
                      dbKey="Trd"
                      busField="ProjectBuild"
                      busType="projectReserve"
                      :busKey="projectBuildId"
                      ftpKey="ftp"
                      v-model="attachmentData" :show-file-list="false">
                      <el-button size="small" type="primary" v-show="btnShow" icon="el-icon-plus">新增附件</el-button>
                    </ht-upload>
                  </div>
                  <div>
                    <a-table :columns="attachmentColumns" :data-source="attachmentDataList" :pagination="false" rowKey="key" bordered  size='small'>
                      <a slot="fileName" slot-scope="text,record"  @click="previewAttach(record.key,record.fileName)" href="javascript:void(0)" title="点击预览附件" style="color: blue">{{ text }}</a>
                      <span slot="size" slot-scope="text,record" >
                  <span>{{ text}} </span>
                  <a-button @click="deleteAttach(record.key)" v-show="btnShow" size="small" shape="circle" icon="close-circle" style="left: 133px;position: relative;"/>
                </span>
                    </a-table>
                  </div>
                </div>
                <!--<div class="info-title">
                  <img src="@/assets/category-blue.png" alt="">
                  <span>移交档案清单说明</span>
                </div>
                <div>
                  <a-table :columns="attachListColumns" bordered :pagination='false' :data-source="attachListData"
                           size='small' rowKey='node'>
                  </a-table>
                </div>-->
              </div>

              <!-- 项目审批意见 -->
              <div class="approval-opinion" v-if="approvalShow">
                <div class="info-title">
                    <img src="@/assets/category-blue.png" alt="">
                    <span>项目转储审批意见</span>
                </div>
                <div class="process-engine" style="width:100%;">
                  <ht-approval
                    ref="childrenRef"
                    :process-instance-id="processInstanceId"
                    :options="options"
                    :custom="custom"
                    :task-load="taskLoad"
                    :before-submit="beforeSubmit"
                    @reject="afterReject"
                    @back="backAction"
                    :before-reject="beforeReject"
                    :show-task-history="true"
                    :history-dialog="historyDialog"
                    :message-id="messageId"
                    :showPrintBtn="showPrintBtn"
                    :show-upload-btn="false"
                    :hidden-task-def-key="hiddenTaskDefKey"
                    :snapshotConfigs="snapshotConfigs">
                    </ht-approval>
                  </div>
              </div>
          <div class="attachment-detail" v-if="activeProcessInstanceId&&activeProcessInstanceId!=''">
            <div class="info-title">
              <img src="@/assets/category-blue.png" alt="">
              <span>激活原因</span>
            </div>
            <div class="content-box">
              <a-textarea v-model="projectReserveInfo.activeReason" readOnly style="border-color: red;" auto-size />
            </div>
          </div>
          <!-- 项目审批意见 -->
          <div class="approval-opinion" v-if="activeProcessInstanceId&&activeProcessInstanceId!=''">
            <div class="info-title">
              <img src="@/assets/category-blue.png" alt="">
              <span>项目激活审批意见</span>
            </div>
            <div class="process-engine" style="width:100%;">
              <ht-approval
                ref="childrenRefActive"
                :process-instance-id="activeProcessInstanceId"
                :options="options"
                :custom="custom"
                @reject="afterRejectActive"
                @back="backActionActive"
                :before-reject="beforeRejectActive"
                :show-task-history="true"
                :history-dialog="historyDialog"
                :message-id="messageId"
                :showPrintBtn="showPrintBtn"
                :show-upload-btn="false"
                :hidden-task-def-key="hiddenTaskDefKey"
                :snapshotConfigs="snapshotConfigs"
                >
              </ht-approval>
            </div>
          </div>

          <div style="position:fixed;bottom:20px;left: 0;width: 100%;text-align: center;">
            <a-button type="primary"  v-show="btnShow" size="large" :ghost="true" @click="save">保存</a-button>
            <a-button type="primary" v-show="btnShow&&submitBtnShow" size="large" @click="submitReserve"  style="margin-left: 30px;">提交</a-button>
            <a-button type="primary" v-show="activeBtnShow" size="large" @click="submitActive"  style="margin-left: 30px;">重新激活</a-button>
          </div>
          <process-user-select :columns="selUserCols" @selectUserConfirm="selectUserConfirm" ref="processUserSelect" />
        </div>
      <a-modal title="填写激活原因" :visible="activeReasonShow" @ok="showSelectActiveUser" @cancel="activeReasonShow = false" width = "70vw" :height = "400" :destroyOnClose="true">
        <a-textarea v-model="projectReserveInfo.activeReason" placeholder="请输入激活原因，250字以内" :auto-size="{ minRows: 3, maxRows: 5 }" />
      </a-modal>
        <a-back-top style="right:50px;"/>
    </div>
</template>
<script>
import $ from 'jquery'
import Vue from 'vue'
import { Modal } from 'ant-design-vue'
import '@/config/upload.install.js'
import {getAction,postAction,getActionAsync,previewAttach} from '@/api/manage'
import { ACCESS_TOKEN,USER_NAME } from "@/store/mutation-types"
import {getParamValFromUrl,formatFileSize, endWith} from '@/utils/common.js'

const attachListColumns = [
  {
    title: '转储备节点',
    dataIndex: 'node',
    width: '20%'
  },
  {
    title: '附件清单',
    dataIndex: 'list',
    width: '80%'
  }
];
const attachListData = [
  {
    node: '立项后',
    list: '包括但不限于：《研发项目立项书》《项目可行性分析报告》《产品开发说明书》《立项上会会议纪要》《实验记录》',
  },
  {
    node: '中期评审后',
    list: '包括但不限于：《研发项目立项书》《项目可行性分析报告》《产品开发说明书》《立项上会会议纪要》《小试总结报告》《机理研究第一阶段小试报告》（按实际）《中期方案评审上会会议纪要》《实验记录》',
  },
  {
    node: '试产评审后',
    list: '包括但不限于：《研发项目立项书》《项目可行性分析报告》《产品开发说明书》《立项上会会议纪要》《小试总结报告》《机理研究第一阶段小试报告》（按实际）《中期方案评审上会会议纪要》《中试总结报告》《机理项目第二阶段中试报告》《上市检核表》《研发项目试产申请表》《项目上会审批记录表》《实验记录》',
  }
];
export default {
    components: {
      'htApproval': () => import('@/config/ht-approval.umd.min.js'),
      'HomeNav': () => import('@/components/layouts/HomeNav'),
      'ProjectBuildBasicShow': () => import('@/components/tools/projectBuild/ProjectBuildBasicShow'),
      ProcessUserSelect: () => import('@/components/tools/projectBuildStup/ProcessUserSelect'),
    },
    data () {
      return {
        attachListColumns,
        attachListData,
        floatNavShow:false,
        approvalShow:false,
        btnShow:false,
        activeBtnShow:false,
        activeReasonShow:false,
        btnLoading:false,
        submitBtnShow:false,
        submitType:'',
        hiddenTaskDefKey:"submit",
        url:{
          getProjectAuditById:'/projectBuildAudit/getProjectAuditById',
          getReserveById:'/projectBuildReserve/queryByBuildId',
          saveReserve:'/projectBuildReserve/save',
          submitReserve:'/projectBuildReserve/submit',
          saveSuggestion:'/projectBuildReserve/saveSuggestion',
          submitActive:'/projectBuildReserve/submitActive',
          auditPass:'/projectBuildReserve/auditPass',
          auditNotPass:'/projectBuildReserve/auditNotPass',
          auditBack:'/projectBuildReserve/auditBack',
          getAttachesList:'/tp/attach/getAttaches',
          downLoadBatch: '/common/downLoadBatch',
          teamUrl:''
        },
        projectReserveInfo:{currentTimeNode:''},
        projectBuildId: this.$route.query.projectBuildId,
        projectClass:'',
        projectAuditInfo: {
          projectBuild: {
            projectClass: '0'
          }
        },
        projectManagerUserId:[],
        projectAssistantManagerId:[],
        tabPosition:'top',
        tabBarStyle:{},
        attachmentColumns:[
          {
            title: '附件名称',
            dataIndex: 'fileName',
            width: '40%',
            scopedSlots: { customRender: 'fileName' }
          },
          {
            title: '上传人',
            dataIndex: 'uploaderName',
            width:'15%',
            align:'center'
          },
          {
            title: '上传时间',
            dataIndex: 'uploadTime',
            width:'15%',
            align:'center'
          },
          {
            title: '文件大小',
            dataIndex: 'size',
            width:'30%',
            align:'center',
            scopedSlots: { customRender: 'size' }
          },
        ],
        attachmentData:[],
        attachmentDataList:[],
        userinfo:{
          info:this.$store.getters.userInfo,
          module:'approval',
        },
        options: {
            request: {
                baseUrl: this.API_BASE_URL,   // 业务系统根路径
                timeOut: 5000,  // 请求超时时间
                interceptors: (config) => {
                  config.headers['X-Access-Token']=Vue.ls.get(ACCESS_TOKEN)
                  return config
                }
            },
            userId: Vue.ls.get(USER_NAME)
        },
        processInstanceId: '',
        currentTaskDefKey:'',
        currentAuditUser:'',
        activeProcessInstanceId: '',
        returnShowConfirm: false,   // 退回显示确认框
        messageId: '',          // 工作台URL里面的msgId参数
        showPrintBtn: false,
        custom: {},
        historyDialog: {
            // 审批历史模态框属性
        },
        auditUserType:'',
        //选人弹窗参数
        userSel: {
          tabUrl: '/upms/user/selUserListWithNoLock',
          title:'',
          visible: false,
          visibleFunc: false,
          confirmLoading: true,
          keyword: '',
          colums: [
                {
                    title: '用户名',
                    dataIndex: 'username',
                    align:'center',
                    scopedSlots: { customRender: 'username' },
                },
                {
                    title: '姓名',
                    dataIndex: 'realname',
                    align:'center',
                },
                {
                    title: '部门',
                    dataIndex: 'orgCodeTxt',
                    align: 'center'
                }
                ],
          data: [],
          freshKey: 0,
          deptManagerUserData:[],
          functionDepartmentUserData:[]
        },
        deptManagerUserId:'',
        deptManagerUserName:'',
        functionDepartmentUserId:[],
        functionDepartmentUserName:'',
        delFunctionUserData:[],
        addFunctionUserData:[],
        flag:false,
        selUserCols:[],
        techUserCols:[
          { label: '部门A', field: 'deptManagerUserId', username: '', realname: '', required: true },
          { label: '事业总部科技委/公司A', field: 'professionalCommitteeUser', username: '', realname: '', required: true,type:'textarea',placeholder:'可多选' },
          ],
        otherUserCols:[
          { label: '部门A', field: 'deptManagerUserId', username: '', realname: '', required: true },
          { label: '主管领导/相关主管会审', field: 'professionalLeaderUser', username: '', realname: '', required: true,type:'textarea',placeholder:'可多选' },
        ],
        snapshotConfigs: [
        {
          type: 'ref',
          value: 'imageWrapper'
        }
      ]
      }
    },
    mounted () {
      this.messageId = getParamValFromUrl('messageId');
      this.getProjectAudit();
    },
    watch: {
      attachmentData: function (newQuestion, oldQuestion) {
        // this.bindBusKey();
        this.attachDataListFresh();
      }
    },
    methods: {
      previewAttach(attachId,fileName){
        if(this.projectManagerUserId.indexOf(this.options.userId)<0&&
          this.projectAssistantManagerId.indexOf(this.options.userId)<0&&
          this.projectAuditInfo.projectBuild.createUserId!==this.options.userId&&
          !this.projectReserveInfo.currentAuditUserId&&
          this.projectReserveInfo.currentAuditUserId!==this.options.userId){
          this.$message.warning('您没有权限查看附件');
          return false;
        }
        if (
          endWith(fileName, 'rar') ||
          endWith(fileName, 'zip') ||
          endWith(fileName, 'dwg') ||
          endWith(fileName, 'tgz')
        ) {
          this.doDownLoadBatch(attachId);
          return
        }

        let params={
          id:attachId,
          ftpKey:'ftp'
        };
        previewAttach(params).then(result=>{
          const url=URL.createObjectURL(result)
          window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
        }).catch(err => {
          this.$message.warning('下载文件失败');
        })
      },
      doDownLoadBatch(attachIds) {
        if (document.getElementById('_attachToolView_downloadfile_frame') == null) {
          let downloadFrame = $('<iframe id="_attachToolView_downloadfile_frame" style="display: none"></iframe>')
          downloadFrame.appendTo($('body'))
        }
        let iframe = document.getElementById('_attachToolView_downloadfile_frame');
        iframe.src = this.API_BASE_URL +
          this.url.downLoadBatch +
          '?attachIds=' +
          attachIds +
          '&dbKey=Trd&ftpKey=ftp&token=' +
          Vue.ls.get(ACCESS_TOKEN);
      },
      attachDataListFresh() {
        this.attachmentDataList = [];
        this.attachmentData.forEach((item) => {
          let size = formatFileSize(item.size);
          this.attachmentDataList.push({
            key: item.id,
            fileName: item.fileName,
            size: size,
            uploadTime: item.uploadTime,
            uploader: item.uploader,
            uploaderName: item.uploaderName,
          })
        })
      },
      getProjectAudit(){
        getAction(this.url.getProjectAuditById,{projectBuildId:this.projectBuildId}).then(res=>{
          console.log(res.result);
          this.projectAuditInfo=res.result||{};
          this.projectClass=this.projectAuditInfo.projectBuild.projectClass;
          if(this.projectAuditInfo.projectManagerIds){
            this.projectManagerUserId=this.projectAuditInfo.projectManagerIds.split(",");
          }
          if(this.projectAuditInfo.projectAssistantManagerIds){
            this.projectAssistantManagerId=this.projectAuditInfo.projectAssistantManagerIds.split(",");
          }
          this.getProjectReserve();
        })
      },
      getProjectReserve(){
        let _this=this;
        getAction(_this.url.getReserveById,{projectBuildId:_this.projectBuildId}).then(res=>{
          _this.projectReserveInfo=res.result;
          _this.processInstanceId=_this.projectReserveInfo.processInstanceId?_this.projectReserveInfo.processInstanceId:'';
          _this.activeProcessInstanceId=_this.projectReserveInfo.activeProcessInstanceId?_this.projectReserveInfo.activeProcessInstanceId:'';
          if((_this.projectReserveInfo.status&&_this.projectReserveInfo.status>1)||(_this.projectManagerUserId.indexOf(_this.options.userId)<0&&_this.projectAssistantManagerId.indexOf(_this.options.userId)<0&&_this.projectAuditInfo.projectBuild.createUserId!==_this.options.userId)){
            _this.btnShow=false;
          }else{
            _this.btnShow=true;
            if(_this.projectReserveInfo.id&&_this.projectReserveInfo.id!==''){
              _this.submitBtnShow=true;
            }
          }
          _this.approvalShow = !!(_this.projectReserveInfo.processInstanceId && _this.projectReserveInfo.processInstanceId != '');
          _this.activeBtnShow=((_this.projectReserveInfo.status&&_this.projectReserveInfo.status===3&&_this.projectReserveInfo.activeStatus===1)&&(_this.projectManagerUserId.indexOf(_this.options.userId)>=0||_this.projectAssistantManagerId.indexOf(_this.options.userId)>=0||_this.projectAuditInfo.projectBuild.createUserId===_this.options.userId))
        })
      },
      getAttaches(){
        getAction(this.url.getAttachesList,{dbKey:'Trd',busField:'ProjectBuild',busKey:this.projectBuildId,busType:"projectReserve"}).then(res=>{
          if(res.code==1){
            if(res.data!=null){
              this.attachmentData=res.data;
              // this.attachmentData.forEach(item=>{
              //   item.size=(parseInt(item.size)/1024).toFixed(2)+'KB'
              // })
            }
          }else{
            this.$message.warning('加载附件出错:'+res.msg);
          }
        })
      },
      bindBusKey() {
        if (this.attachmentData.length > 0) {
          const ids = this.attachmentData.map(function(item){
            return item.id;
          });
          const jsona = {dbKey: 'Trd',id: ids.toString(),busKey:this.projectBuildId};
          let jsonStr = JSON.stringify(jsona);
          this.$refs.myUpload.bindBusKey(jsonStr);
        }
      },
      deleteAttach(id) {
        const that = this;
        Modal.confirm({
          title: '是否确定删除?',
          onOk() {
            const json = {dbKey: 'Trd',id: id,ftpKey: 'ftp'};
            that.$refs.myUpload.delete(json);

            that.attachmentData.splice(that.attachmentData.findIndex(item => item.id === id), 1)
          },
          onCancel() {
          },
        });
      },
      save(){
        if(!this.projectReserveInfo.reserveReason&&this.projectReserveInfo.reserveReason.trim()==''){
          this.$message.warning("请先输入转储原因再保存", 3000);
          return  false;
        }
        this.projectReserveInfo.projectBuildId=this.projectBuildId;
        postAction(this.url.saveReserve, this.projectReserveInfo).then(res => {
          if (res.success) {
            this.$message.success('保存成功')
            this.getProjectReserve();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      saveSuggestion(suggestion){
        let data={id:this.projectReserveInfo.id}
        if(this.currentTaskDefKey==='functionalDepartment'){
          data.psSuggestion=suggestion;
        }else{
          data.dataSuggestion=suggestion;
        }
        postAction(this.url.saveSuggestion, data).then(res => {
          if (res.success) {
            this.$refs.childrenRef.submitTaskNotBefore();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      submitReserve(){
        if(!this.projectReserveInfo.reserveReason&&this.projectReserveInfo.reserveReason.trim()==''){
          this.$message.warning("请先输入转储原因再提交", 3000);
          return  false;
        }
        if(this.projectClass==='10'&&this.attachmentData.length===0){
          this.$message.warning("您还没有上传附件，不能提交", 3000);
          return  false;
        }
        this.submitType='reserve';
        if(this.projectClass==='10'){
          this.selUserCols=this.techUserCols;
        }else{
          this.selUserCols=this.otherUserCols;
        }
        this.$refs.processUserSelect.doSelect();
      },
      submitActive(){
       this.activeReasonShow=true;
      },
      showSelectActiveUser(){
        if(!this.projectReserveInfo.activeReason||this.projectReserveInfo.activeReason.trim()===''){
          this.$message.warning('请先输入激活原因');
          return;
        }
        if(this.projectReserveInfo.activeReason&&this.projectReserveInfo.activeReason.length>250){
          this.$message.warning('激活原因超过字数限制，250字以内');
          return;
        }
        this.activeReasonShow=false;
        this.submitType='active';
        this.selUserCols=this.techUserCols;
        this.$refs.processUserSelect.doSelect();
      },
      doSubmit(){
        postAction(this.url.submitReserve, this.projectReserveInfo).then(res => {
          if (res.success) {
            this.$message.success('提交成功');
            this.getProjectReserve();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      selectUserConfirm(cols){
        if(!cols||cols.length===0){
          this.$message.warning('没有选择审批人');
          return;
        }
        this.btnLoading=true;
        let data = {};
        cols.forEach((item) => {
          let key = item.field;
          data[key] = item.username
        });
        this.projectReserveInfo.deptManagerUserId=data.deptManagerUserId;
        if(this.projectClass=='10'){
          this.projectReserveInfo.professionalCommitteeUser=data.professionalCommitteeUser;
        }else{
          this.projectReserveInfo.professionalLeaderUser=data.professionalLeaderUser;
        }

        if(this.submitType==='reserve'){
          this.doSubmit()
        }else{
          this.doSubmitActive()
        }
      },
      doSubmitActive(){
        postAction(this.url.submitActive, this.projectReserveInfo).then(res => {
          if (res.success) {
            this.$message.success('提交成功');
            this.getProjectReserve();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //-------------流程回调------start
      beforeSubmit(res) {
        //项目管理员步骤或者数据管理员步骤保存审批意见并更改
        if(this.currentTaskDefKey==='functionalDepartment'||this.currentTaskDefKey==='dataManager'){
          let options = this.$refs.childrenRef.data;
          if (options == '' || options == null || options == undefined) {
            this.$message.warning("审批意见不能为空", 3000);
            return false;
          }
          this.saveSuggestion(options);
          return false;
        }
        return true;
      },
      beforeReject (res) {
          // 驳回前置动作
        return this.checkOptionValue();
      },
      afterReject (res) {
          // 用户点击驳回后成功返回后的处理
        this.getProjectReserve();
      },
      backAction (res) {
        this.getProjectReserve();
      },
      taskLoad(task) {
        this.currentTaskDefKey = task.taskDefKey;
        this.currentAuditUser=task.currentUserId;
      },
      //-------------流程回调------end
      //-------------激活流程回调------start
      beforeRejectActive (res) {
        // 驳回前置动作
        return this.checkOptionValueActive();
      },
      afterRejectActive (res) {
        // 用户点击驳回后成功返回后的处理
        this.getProjectReserve();
      },
      backActionActive (res) {
        this.getProjectReserve();
      },
      checkOptionValueActive() {
        let optionsAc = this.$refs.childrenRefActive.data;
        if (optionsAc == '' || options == null || optionsAc == undefined) {
          this.$message.warning("审批意见不能为空", 3000);
          return false;
        } else {
          return true;
        }
      },
      //-------------激活流程回调------end
      doAuditPass(){
        let flag=false;
        getAction(this.url.auditPass,{id:this.projectReserveInfo.id}).then(res=>{
          if(res.code==200){
            flag=true;
          }else{
            this.$message.warning('流程审批通过接口异常:'+res.message);
          }
        })
        return flag;
      },
      async doAuditNotPass(){
        let flag=false;
        await getActionAsync(this.url.auditNotPass,{id:this.projectReserveInfo.id}).then(res=>{
          if(res.code==200){
            flag=true;
          }else{
            this.$message.warning('流程审批不通过接口异常:'+res.message);
          }
        })
        return flag;
      },
      doAuditBack(backKey){
        let flag=false;
        getAction(this.url.auditBack,{id:this.projectReserveInfo.id,backKey:backKey}).then(res=>{
        })
        if(res.code==200){
          flag=true;
        }else{
          this.$message.warning('流程审批退回接口异常:'+res.message);
        }
        return flag;
      },
      checkOptionValue() {
      var options = this.$refs.childrenRef.data;
      if (options == '' || options == null || options == undefined) {
        this.$message.warning("审批意见不能为空", 3000);
        return false;
      } else {
        return true;
      }
      },
    },
    destroyed() {
      document.removeEventListener('scroll', this.handleScroll)
    }
}
</script>
<style lang="less" scoped>
  .approval {
    height: 100%;
    background: #f5f5f5;
    ul {
      list-style: none;
    }
    .banner{
      height: 80px;
      background-image: url('../../assets/banner-top.png');
      background-position: center;
    }
    .project-summary {
      padding: 0 125px 100px;
      position: relative;
      background: #f5f5f5;
      & /deep/ .ant-tabs-bar {
        border: none;
      }
      & /deep/ .ant-tabs-nav {
        background-color: #31a0e1;
        color: #fff;
        .ant-tabs-tab-active {
          background: #0581ca;
          color: #fff;
        }
        .ant-tabs-tab:hover {
          color: #fff;
        }
      }
      & /deep/ .ant-tabs {
        .ant-tabs-tab {
          margin: 0;
          padding: 10px 20px;
        }
        .ant-tabs-nav-container {
          width: 100%;
          background: #31a0e1;
          border-radius: 3px;
        }
      }
      .info-title {
        display: flex;
        align-items: center;
        margin: 10px 0;
        > img {
          margin-right: 5px;
        }
        > span {
          font-size: 16px;
          font-weight: 900;
          color: black;
        }
      }
      /deep/.ant-table-small > .ant-table-content > .ant-table-body {
        margin: unset;
      }
      &::v-deep .ant-table-thead > tr > th {
        padding-left: 20px;
        background: #dadee9 !important;
      }
      /deep/.ant-table-small,
      /deep/.ant-table-thead > tr:first-child > th:first-child,
      /deep/.ant-table-thead > tr:first-child > th:last-child {
        border-radius: unset;
      }
      ::v-deep .ant-table-tbody .ant-table-row {
        padding-left: 20px;
        background-color: #fff;
      }
      > div {
        margin-top: 1.5%;
      }
      .project-schedule {
        .info-title {
          > img:nth-of-type(2) {
            width: 12px;
            margin-left: 5px;
          }
          > span:nth-of-type(2) {
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
      .attachment-detail {
        .attachment-content {
          & /deep/ .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
          /deep/.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
            padding-left: 30px;
          }
        }
      }
      .approval-opinion {
        .opinion-box {
          padding: 0 5px;
          .opinion-detail {
            border-left: 1px dashed #e1e1e1;
            padding: 0px 15px;
            position: relative;
            &::before {
              content: '';
              position: absolute;
              background-color: #44b785;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              left: -5px;
              top: 5px;
            }
            .opinion_title {
              font-weight: 900;
            }
            .opinion_info {
              border: 1px solid #ededed;
              background-color: #fff;
              padding: 20px 25px 0;
              margin: 5px 0;
              .signature {
                display: inline-block;
                width: 100%;
                text-align: right;
                font-weight: 700;
                > i {
                  font-style: normal;
                  color: #63ace5;
                }
              }
              .controlBox {
                text-align: right;
                margin: 1% 0;
                &/deep/ .ant-btn {
                  border-radius: unset;
                  margin-left: 5px;
                  padding: 0 22px;
                  font-size: 12px;
                  height: 30px;
                }
                &/deep/ button:nth-last-child(1) {
                  padding: 0 10px;
                }
              }
            }
          }
        }
      }
    }
    .project-summary {
      > ul {
        display: flex;
        background-color: #31a0e1;
        border-radius: 1px;
        color: #fff;
        padding: 0;
        font-size: 16px;
        font-weight: 900;
        li {
          padding: 10px 15px;
          cursor: pointer;
          &:hover, &.clickShow{
            background-color: #0581ca;          
          }
        }
      }
    }
    .process-engine {
      /deep/ #process-container {
        width: unset !important;
      }
      /deep/ #process-container .process-item .info-fullMessage {
        max-width: 1200px;
      }
    }
  }
  .value-page{
    margin-top: unset !important;
  }
@media (max-width: 1080px){
  div.approval .project-summary{padding: 0 30px 100px}
}
</style>